<script setup>
import { reactive, ref } from 'vue';
import { userListApi, userAddApi, userChangeState, userChangeInfo, delUser } from "../../util/requrst"
const data = reactive({
  keyWord: "",
  searchParams: {
    query: "",
    // 默认配置一页
    pagenum: 1,
    // 一页显示5条
    pagesize: 5
  },
  total: 0,
  userList: [],
  dialogTableVisible: false,
  dialogTableEVisible: false,
  formData: {
    username: "",
    password: "",
    email: "",
    mobile: "",
  },
  formData2: {
    id: "",
    email: "",
    mobile: "",
  },
  // 新增用户表单规则
  rules: {
    username: [{
      required: true,
      message: '此项目为必填项目',
      trigger: 'blur',
    }],
    password: [{
      required: true,
      message: '此项目为必填项目',
      trigger: 'blur',
    }],
    email: [{

      required: true,
      message: '请输入电子邮件地址',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: '请输入正确的格式的电子邮件地址',
      trigger: ['blur', 'change'],

    }],
    mobile: [{
      required: true,
      // 电话正则表达式
      // pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    }]
  },
  // 编辑用户表单规则
  rules2: {
    email: [{

      required: true,
      message: '请输入电子邮件地址',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: '请输入正确的格式的电子邮件地址',
      trigger: ['blur', 'change'],

    }],
    mobile: [{
      required: true,
      // 电话正则表达式
      // pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    }]
  },


})
const searchList = () => {
  userListApi(data.searchParams).then(res => {
    if (res.data) {
      console.log("用户数据", res);
      data.userList = res.data.users
      data.total = res.data.total
      console.log(data.userList);
    }
  })
}
// 新增用户表单显示
const addUser = () => {
  data.dialogTableVisible = true
}
// 新建用户表单清除(取消功能)
const goback = () => {
  data.dialogTableVisible = false
  data.formData = {
    username: "",
    password: "",
    email: "",
    mobile: "",
  }
}
// 关闭编辑表单修改
const goback2 = () => {
  data.dialogTableEVisible = false

}

//新增用户提交
const submitFrom = (forEl) => {
  forEl.validate(res => {
    if (!res) {
      return
    } else {
      // 表单验证通过
      userAddApi(data.formData).then(res => {
        if (res.data) {
          // 表单隐藏
          data.dialogTableVisible = false
          // 清空表单
          data.formData = {
            username: "",
            password: "",
            email: "",
            mobile: "",
          },
            alert("表单通过")
          // 重新获取list
          searchList()

        }
      })

    }
  })
}
// 修改提交
const submitEFrom = (forEl) => {
  forEl.validate(res => {
    if (!res) {
      return
    }
    // 提交修改
    userChangeInfo(data.formData2).then(res => {
      if (res.data) {
        data.dialogTableEVisible = false
        alert("修改成功")
        searchList()

      }
    })
  })
}
// 状态更改
const switchChange = row => {

  userChangeState(row).then(res => {
    if (res.data) {
      searchList()
    }
  })
}
// 编辑用户
const editRow = row => {
  data.dialogTableEVisible = true,
    // console.log("编辑的数据为", row);
    // 展示编辑表单
    data.formData2.email = row.email
  data.formData2.mobile = row.mobile
  data.formData2.id = row.id
}
const delUserman = row => {
  console.log("要删除的数据", row);
  delUser(row).then(res => {
    if (res.data === null) {
      alert("删除成功")
      searchList()
    }
  })
}
// 方法初始化
searchList()
// 表单数据初始化
const userFrom = ref()
const userFrom2 = ref()
</script>

<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号列表</el-breadcrumb-item>

    </el-breadcrumb>
    <!-- 白色内容区域 -->
    <div class="page_content">
      <div class="flex">
        <div class="input_box">
          <el-input v-model="data.searchParams.query" style="max-width: 600px" placeholder=" 请输入关键字"
            class="input-with-select">

            <template #append>
              <el-button @click="searchList"><el-icon>
                  <Search />
                </el-icon></el-button>
            </template>


          </el-input>
        </div>
        <el-button type="primary" @click="addUser">新建用户</el-button>
      </div>
      <!-- 表格 -->
      <!-- data要展示的数据 -->
      <!-- prop没条数据的对应属性 -->
      <!-- Lable列标题 -->
      <!-- scope.row相当于一条数据 -->
      <el-table :data="data.userList" style="width: 100%">
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="mobile" label="电话" />
        <el-table-column prop="role_name" label="角色" />
        <el-table-column prop="mg_state" label="状态">
          <template #default="scope">
            <el-switch v-model="scope.row.mg_state" @change="switchChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
            <el-button type="danger" @click="delUserman(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页栏 -->
      <el-pagination background layout="	prev, pager ,next, jumper" v-model:current-page="data.searchParams.pagenum"
        v-model:page-size="data.searchParams.pagesize" :page-sizes="[2, 3, 5, 6]" :total="data.total"
        @size-change="searchList" @current-change="searchList" class="changeLan" />
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="data.dialogTableVisible" title="新建用户">
      <!-- 表单 -->

      <el-form :model="data.formData" :rules="data.rules" ref="userFrom">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="data.formData.username" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="data.formData.password" type="password" placeholder="请输入用户密码" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="data.formData.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="data.formData.mobile" placeholder="请输入用户手机号" />
        </el-form-item>
      </el-form>
      <template #footer class="footer">
        <div class="flex foot-button">
          <el-button @click="goback">取消</el-button>
          <el-button type="primary" @click="submitFrom(userFrom)">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="data.dialogTableEVisible" title="编辑用户">
      <!-- 表单 -->

      <el-form :model="data.formData2" :rules="data.rules2" ref="userFrom2">

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="data.formData2.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="data.formData2.mobile" placeholder="请输入用户手机号" />
        </el-form-item>
      </el-form>
      <template #footer class="footer">
        <div class="flex foot-button">
          <el-button @click="goback2">取消</el-button>
          <el-button type="primary" @click="submitEFrom(userFrom2)">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.page_content {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  margin-top: 30px;
}

.flex {
  display: flex;
}

.input_box {
  margin-right: 10px;
}



.foot-button {
  margin-left: 432px;

}

.page_content>.changeLan {
  margin-left: 300px;

}
</style>